<template>
  <div class="container">
    <div class="weui_cells_title">就诊卡：</div>
    <div class="weui_cells weui_cells_access" style="margin-top:10px;">
      <a @click="selectCard" class="weui_cell" href="javascript:;">
        <div class="weui_cell_hd">
          <i class="fa fa-credit-card fa-2x icon-color" style="width:45px;margin-right:5px;display:block;"></i>
        </div>
        <div class="weui_cell_bd weui_cell_primary">
          <p>{{card?card.name:''}}</p>
          <p>{{card?card.num:''}}</p>
        </div>
        <div class="weui_cell_ft">
          选诊疗号
        </div>
      </a>
    </div>
    <div class="weui_cells_title">
      <p class="am-ft-sm am-ft-gray">
        <span class="am-ft-orange"><i class="fa fa-info-circle"></i></span> 只支持查询开单日期起15日内化验单
      </p>
    </div>
    <div class="weui_cells weui_cells_access weui_cells_form">
      <div class="weui_cell">
        <div class="weui_cell_hd">
          <label class="weui_label">开单日期</label>
        </div>
        <div class="weui_cell_bd weui_cell_primary">
          <input class="weui_input" type="date" v-model="startDate">
        </div>
        <div class="weui_cell_ft">
        </div>
      </div>
    </div>
    <div class="weui_cells_title" v-show="showEmpty">{{emptyMsg}}</div>
    <div class="weui_cells weui_cells_access ft-sm" style="margin-top:10px;">
      <a @click="viewInspection($index)" v-for="inspection in inspections" class="weui_cell" href="javascript:;">
        <div class="weui_cell_hd">
          <i class="fa fa-file-excel-o fa-2x icon-color" style="width:35px;margin-right:5px;display:block;"></i>
        </div>
        <div class="weui_cell_bd weui_cell_primary">
          <p>开单日期：<span class="am-ft-sm am-ft-blue">{{inspection.date}}</span></p>
          <p>检验编号：<span class="am-ft-sm am-ft-blue">{{inspection.id}}</span></p>
          <p>检验名称：<span class="am-ft-sm am-ft-blue">{{inspection.name}}</span></p>
        </div>
        <div class="weui_cell_bd">
          <p>
            <span v-show="!inspection.reportDate" class="am-ft-gray am-ft-13">未出报告</span>
          </p>
        </div>
        <div v-show="inspection.reportDate" class="weui_cell_ft">
        </div>
      </a>
    </div>
    <div>
      <p style="padding:10px;" class="am-ft-sm am-ft-gray">
        <span class="am-ft-orange"><i class="fa fa-info-circle"></i></span> 地贫确诊、封闭抗体、不孕3项、抗精子抗体、精液生化、Y染色体、白带细菌培养结果异常、TCT等检查项目，如出报告，微信没有显示，请凭发票到检验科1号窗取结果。
      </p>
    </div>
</template>
<style scoped>
.ft-sm p {
  padding: 3px;
  font-size: 12px;
}

.blue_tag {
  background-color: #0ae;
  color: #fff;
  font-size: 13px;
  padding: 2px 4px;
  border: none;
  vertical-align: middle;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
}

.orange_tag {
  background-color: #ff8208;
  color: #fff;
  font-size: 13px;
  padding: 2px 4px;
  border: none;
  vertical-align: middle;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
}
</style>
<script>
import { commonUtil } from '../../plugins/common'
import { showCommonToast } from '../../vuex/actions'
import _ from 'underscore'

export default {
  name: 'GetInspectionView',
  data: function () {
    return {
      startDate: '',
      inspections: [],
      showEmpty: false,
      emptyMsg: ''
    }
  },
  vuex: {
    getters: {
      card: ({ card }) => _.findWhere(card.cards, { isSelected: true })
    },
    actions: {
      showCommonToast
    }
  },
  ready: function () {
    this.startDate = commonUtil.getDateStr(-15)

    this.$watch('startDate', function (val) {
      this.getInspections()
    })

    this.$watch('card', function (val) {
      this.getInspections()
    })

    this.getInspections()
  },
  methods: {
    selectCard: function () {
      this.$router.go({ name: 'selectCard' })
    },
    getInspections: function () {
      if (!this.card || this.startDate === '') {
        return
      }
      this.showEmpty = false

      var self = this

      this.$ajax.get('GetReportList', 'Report', {
        cardNo: this.card.num,
        cardName: this.card.name,
        examType: 'C',
        startDate: this.startDate
      }).then(function (data) {
        if (data.ResultCode !== '0') {
          self.showEmpty = true
          self.emptyMsg = '找不到化验单'
          self.inspections = []
        } else {
          self.inspections = _.map(data.ResultData, function (val) {
            return {
              id: val.ExamId,
              name: val.ExamItem,
              date: val.OperDate,
              reportDate: val.ReportDate,
              status: val.ReportDate
            }
          })
          if (self.inspections.length <= 0) {
            self.showEmpty = true
            self.emptyMsg = '找不到化验单'
            self.inspections = []
          }
        }
      })
    },
    viewInspection: function (idx) {
      var inspection = this.inspections[idx]
      if (!inspection.reportDate) {
        return
      }
      this.$router.go({ name: 'getInspectionDetail', query: { cardNo: this.card.num, cardName: this.card.name, examType: 'C', appNo: inspection.id, appName: inspection.name, reportDate: inspection.reportDate } })
    }
  }
}
</script>
